<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>商户信息</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body>
    <div style="text-align: center">
        <h1>商户列表</h1>

        <br/>
        <div class="demoTable">
            搜索商户名称：
            <div class="layui-inline">
                <input class="layui-input" name="name" id="name" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
            <button class="layui-btn" id="add" onclick="toSave()">新增</button>
        </div>

        <!--class="layui-hide"-->
        <table  id="test" lay-filter="test" ></table>
        <!--操作列-->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn-xs" lay-event="active">激活</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="close">关闭</a>
        </script>

    </div>
    <script>
        function toSave() {

            layer.open({
                type: 2,
                title:"新增商户"
                ,area: ['700px', '500px']
                ,id: 'toAdd' //防止重复弹出
                ,content: "/toMerchant"
                //,btn: ['确认', '取消']
                ,btnAlign: 'c' //按钮居中
                ,shade: 0.1 //不显示遮罩
                ,yes: function(){
                    layer.closeAll();
                },
                success: function(layero, index){
                    console.log(layero, index);
                }
            });
        }
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                ,url:'/getMerchantList'
                ,page: true
                ,id: 'testReload'
                ,width:1380
                ,cols: [
                    [
                        {field:'id', width:80, title: '商户号',align: 'center'},
                        {field:'name', width:160, title: '商户名称',align: 'center'},
                        {field:'address', width:280, title: '商户地址',align: 'center'},
                        {field:'accountNo', width:220, title: '账号',align: 'center'},
                        {field:'accountName', width:240, title: '户名',align: 'center'},
                        {field:'stateStr', width:100, title: '商户状态',align: 'center'},
                        {field:'', title: '操作', align: 'center',width:280,toolbar:"#barDemo"}
                    ]
                ]
            });

            /*重新加载数据表格*/
            var $ = layui.$, active = {
                reload: function(){
                    var name = $('#name');
                    table.reload('testReload', {
                        where: {
                            name: name.val()
                        }
                    });
                }
            };

            /*绑定搜索点击事件*/
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //监听工具条
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.open({
                        type: 2,
                        title:"查看详情"
                        ,area: ['700px', '500px']
                        ,id: 'toDetail' //防止重复弹出
                        ,content: "/toDetail?id="+data.id
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0.1 //不显示遮罩
                        ,yes: function(){
                            layer.closeAll();
                        },
                        success: function(layero, index){
                            console.log(layero, index);
                        }
                    });
                } else if(obj.event === 'del'){
                    layer.confirm('确定删除商户吗？', function(index){
                        //console.log(data);
                        $.ajax({
                            url: "/delete",
                            type: "POST",
                            data:{"id":data.id},
                            dataType: "json",
                            success: function(data){
                                if(data==1){
                                    layer.msg("删除商户成功", {icon: 6});
                                    /*重新加载数据表格*/
                                    var name = $('#name');
                                    table.reload('testReload', {
                                        where: {
                                            name: name.val()
                                        }
                                    });
                                }else{
                                    layer.msg("删除失败", {icon: 5});
                                }
                            }
                        });
                    });
                } else if(obj.event === 'active'){
                    layer.confirm('确定激活商户吗？', function(index){
                        //console.log(data);
                        $.ajax({
                            url: "/changeState",
                            type: "GET",
                            data:{"id":data.id},
                            dataType: "json",
                            success: function(data){
                                if(data=="1"){
                                    layer.msg("激活商户成功", {icon: 6});
                                    /*重新加载数据表格*/
                                    var id = $('#id');
                                    table.reload('testReload', {
                                        where: {
                                            id: id.val()
                                        }
                                    });
                                }else{
                                    layer.msg("激活商户失败："+data, {icon: 5});
                                }
                            }

                        });
                    });
                }else if(obj.event === 'close'){
                    layer.confirm('确定关闭商户吗？', function(index){
                        //console.log(data);
                        $.ajax({
                            url: "/changeState",
                            type: "GET",
                            data:{"id":data.id},
                            dataType: "json",
                            success: function(data){
                                if(data==1){
                                    layer.msg("关闭商户成功", {icon: 6});
                                    /*重新加载数据表格*/
                                    var id = $('#id');
                                    table.reload('testReload', {
                                        where: {
                                            id: id.val()
                                        }
                                    });
                                }else{
                                    layer.msg("关闭商户失败", {icon: 5});
                                }
                            }

                        });
                    });
                } else if(obj.event === 'edit'){
                    layer.open({
                        type: 2,
                        title:"修改商户"
                        ,area: ['700px', '500px']
                        ,id: 'toUpdate' //防止重复弹出
                        ,content: "/toUpdate?id="+data.id
                        //,btn: ['确认', '取消']
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0.1 //不显示遮罩
                        ,yes: function(){
                            layer.closeAll();
                        },
                        success: function(layero, index){
                            console.log(layero, index);
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>